<template >
	<view class="cc-form-wrap" :style="{padding: type == 'form' ? '0 30rpx' : '0'}">
		<slot></slot>
	</view>
</template>

<script>
	/**
	 * 此组件是包裹uView表单元素的块状结构
	 */
	export default {
		name: 'w-form-wrap',
		props: {
			// 可选form或drawer，drawer时没有padding值，但组件还是必须使用来遮挡最后一条border
			type: {
				type: String,
				default: 'form'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cc-form-wrap {
		$bg-color: #FFFFFF;
		background: $bg-color;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		position: relative;
		// 覆盖隐藏最后一项的border
		&::after {
			content: '';
			position: absolute;
			height: 6px;
			width: 96%;
			background-color: $bg-color;
			bottom: -3px;
			left: 2%;
			z-index: 100;
		}
	}
</style>
